@page
@{ Layout = "_Layout"; }
<el-card :style="{ height: ($(window).height()-20) + 'px' }">
    <div slot="header" class="clearfix">
        <el-row :gutter="13">
            <el-col :span="20">
                <el-form ref="form" :model="form" :size="euiSize">
                    <el-form-item label="数据库查询命令" prop="query" name="query" :rules="{ required: true, message: '请输入数据库查询命令' }">
                        <el-input type="textarea" rows="3" v-model="form.query" placeholder="查询命令"></el-input>
                        <div class="tips">
                            需要执行的数据库查询命令，此命令将对数据库进行查询操作，必须以“SELECT”字符串作为开头
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="4">
                <el-button icon="el-icon-thumb" :size="euiSize" type="primary" v-on:click="btnSubmitClick" style="height:100px;width:100%;font-size:20px;">
                    执 行
                </el-button>
            </el-col>
        </el-row>
    </div>
    <template v-if="form.query && properties && results">
        <el-alert type="success" show-icon>
            查询成功，共返回<el-tag type="danger">{{ count }}</el-tag> 条结果。
        </el-alert>
        <el-table :data="results"
                  size="mini"
                  :height="($(window).height() - 300)"
                  style="width: 100%">
            <el-table-column v-for="property in properties"
                             :key="property"
                             :prop="property" sortable show-overflow-tooltip
                             :label="property">
            </el-table-column>
        </el-table>
    </template>
</el-card>
@section Scripts{
<script src="/sitefiles/assets/js/admin/settings/databaseQuery.js" type="text/javascript"></script>
 }
